import React from 'react'
import { Table, Icon, Modal, Popconfirm, Form, Input, Row, Col, DatePicker, Button, Message } from 'antd';
const FormItem = Form.Item;
import withdrawApi from '../../../api/withdraw';

const { RangePicker } = DatePicker;
import moment from 'moment';

import PanelBox from '../../../components/PanelBox';

import Withdraw from '../../Form/withdraw';

export default class TablePage extends React.Component {
 
  state = {
    data: [],
    pagination: {
      pageSize: 20,
      pageNum: 1,
    },
    loading: false,
    isOpenCreate:false,
    balance : 0.00,
    officeId :this.props.profile.user.officeId
  };
  handleTableChange = (pagination, filters, sorter) => {
    const pager = { ...this.state.pagination };
    if (pagination.current) {
      pager.pageNum = pagination.current;
      pager.current = pagination.current;
    }
    this.setState({
      pagination: pager,
    });
    this.fetch({
      pageSize: pagination.pageSize,
      pageNum: pagination.current,
      sortField: sorter.field,
      sortOrder: sorter.order,
      ...filters,
    });
  }
  autoChange = () => {
    const pagination = { ...this.state.pagination };
    pagination.current = pagination.pageNum;
    this.setState({
      pagination: pagination,
    });
    this.fetch({
      pageSize: pagination.pageSize,
      pageNum: pagination.current,
    });
    this.initData();
  }

  fetch = (params) => {
    this.setState({ loading: true });
    params.officeId=this.state.officeId;
    withdrawApi.get('/getWithdraw', { params }).then((data) => {
      const _data = data.data.list;
      const pagination = { ...this.state.pagination };
      pagination.total = data.data.total;
      this.setState({
        loading: false,
        data: _data,
        pagination,
      });
    });
  }

  componentDidMount = () => {
    
    this.fetch({ ...this.state.pagination });
    this.initData();
  }
 
  initData = () => {
    this.setState({ loading: true });
    withdrawApi.get('/queryWallet').then((data) => {
      const _data = data.data;
      this.setState({
        loading: false,
        balance: _data.balance
      });
    });
  }

  close = () => {
    this.setState({
      isOpenCreate: false,
      clearForm: true
    });
  }

  refeshData = () => {
    //this.fetch();
    this.autoChange();
    //this.handleTableChange(this.state.pagination);
  }


  handleLogOut = () => {
    const { logout } = this.props
    logout().payload.promise.then(() => {
      this.props.history.replace('/login');
    });
  }

  startCreate =() =>{
     this.startWithdraw();
  }
  
  startWithdraw = () => {
    this.setState({
      isOpenCreate: true,
      clearForm: false
    });
  }


  render() {
    let { sortedInfo, filteredInfo } = this.state;
    sortedInfo = sortedInfo || {};
    let columns = [{
      title: '持卡姓名',
      dataIndex: 'cardusername',
      width: '15%',
    }, {
      title: '联系电话',
      dataIndex: 'phone',
      width: '15%',
    }, {
      title: '提现金额',
      dataIndex: 'money',
      width: '10%',
    }, {
      title: '手续费',
      dataIndex: 'othermoney',
      width: '10%'
    }, {
      title:'申请时间',
      dataIndex: 'create_date',
      width: '18%',
      sorter: true,
    },{
      title: '当前状态',
      dataIndex: 'state',
      width: '13%',
      render: (text, record, index) => {
        switch (record.state) {
          case 0:
            return '申请中';
          case 1:
            return '同意提现';
          case 2:
            return '拒绝提现';
          default:
            return '未知';
        }
      },
    }];
    

    return (
      <div>
        <SearchWithdrawForm state={this.state} goSearch={this.fetch} startCreate={this.startCreate}/>
        <PanelBox>
          <Table columns={columns} rowKey={record => record.registered} dataSource={this.state.data} pagination={this.state.pagination}
            loading={this.state.loading} onChange={this.handleTableChange}  rowKey={'id'} 
            expandedRowRender={record => <p style={{ margin: 0 }}>所属银行:{record.bankid}　　　银行卡号:{record.banknum}　　　开户信息:{record.bankstart}　　　备注信息:{record.remarks}</p>}
          />
        </PanelBox>
        <Modal
          title="提现(请准确无误的输入提现信息便于更快的到账！)"
          visible={this.state.isOpenCreate}
          onOk={this.close}
          onCancel={this.close}
          wrapClassName="vertical-center-modal"
          footer={null}
        >
        <Withdraw close={this.close} refeshData={this.refeshData} officeId={this.state.officeId}/>
        </Modal>
      </div>
    );
  }
}

class SearchForm extends React.Component {
  // 开始搜索
  goSearch = (e) => {
    let params = this.props.form.getFieldsValue().search;
    let _this = this.props;
    params.pageSize = _this.state.pagination.pageSize;
    if (params.date.length > 0) {
      params.startCreateDate = moment(params.date[0]).format("YYYY-MM-DD");
      params.endCreateDate = moment(params.date[1]).format("YYYY-MM-DD");
    }
    delete params.date;
    _this.goSearch(params);

  }

  srearchStyle = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };


  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = this.srearchStyle;
    const search = {
      name: "name",
      loginName: "loginName",
      date: "date",
    };

    return <Form onSubmit={this.goSearch} layout="inline" style={{ marginBottom: '10px' }}>
      <FormItem {...formItemLayout} label="申请时间" style={{ marginLeft: '-10px' }}>
        {getFieldDecorator('search.date', {
          initialValue: []
        })(
          <RangePicker format="YYYY/MM/DD" />
          )}
      </FormItem>
      <FormItem >
        <Button type="primary" icon="search" htmlType="submit">搜索</Button>
      </FormItem>
      <FormItem>
      &nbsp;&nbsp;您目前余额为：{this.props.state.balance}&nbsp;&nbsp;&nbsp;&nbsp;
        <Button type="primary" onClick={this.props.startCreate}>立即提现</Button>
      </FormItem>
    </Form>
  }
}
const SearchWithdrawForm = Form.create({})(SearchForm);